// src/pages/dashboard/index.tsx
import React, { useState, useEffect } from 'react';
import { Box, Card, CardContent, Typography, Grid, List, ListItem, ListItemText, Divider } from '@mui/material';
import { format, isToday, isFuture } from 'date-fns';

interface Meeting {
  id: string;
  title: string;
  start: string;
  end: string;
  description?: string;
}

const Dashboard: React.FC = () => {
  const [meetings, setMeetings] = useState<Meeting[]>([]);
  const [stats, setStats] = useState({
    totalMeetings: 0,
    todayMeetings: 0,
    upcomingMeetings: 0
  });

  useEffect(() => {
    // 从 localStorage 获取会议数据
    const storedMeetings = localStorage.getItem('meetings');
    if (storedMeetings) {
      const parsedMeetings = JSON.parse(storedMeetings);
      setMeetings(parsedMeetings);

      // 计算统计信息
      setStats({
        totalMeetings: parsedMeetings.length,
        todayMeetings: parsedMeetings.filter((meeting: Meeting) => 
          isToday(new Date(meeting.start))).length,
        upcomingMeetings: parsedMeetings.filter((meeting: Meeting) => 
          isFuture(new Date(meeting.start))).length
      });
    }
  }, []);

  // 获取今天的会议
  const todayMeetings = meetings
    .filter(meeting => isToday(new Date(meeting.start)))
    .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime());

  return (
    <Box sx={{ p: 3 }}>
      <Typography variant="h4" sx={{ mb: 4 }}>
        会议统计
      </Typography>

      <Grid container spacing={3} sx={{ mb: 4 }}>
        <Grid item xs={12} sm={4}>
          <Card>
            <CardContent>
              <Typography color="textSecondary" gutterBottom>
                总会议数
              </Typography>
              <Typography variant="h3">
                {stats.totalMeetings}
              </Typography>
            </CardContent>
          </Card>
        </Grid>
        <Grid item xs={12} sm={4}>
          <Card>
            <CardContent>
              <Typography color="textSecondary" gutterBottom>
                今日会议
              </Typography>
              <Typography variant="h3">
                {stats.todayMeetings}
              </Typography>
            </CardContent>
          </Card>
        </Grid>
        <Grid item xs={12} sm={4}>
          <Card>
            <CardContent>
              <Typography color="textSecondary" gutterBottom>
                即将进行的会议
              </Typography>
              <Typography variant="h3">
                {stats.upcomingMeetings}
              </Typography>
            </CardContent>
          </Card>
        </Grid>
      </Grid>

      <Typography variant="h5" sx={{ mb: 2 }}>
        今日会议列表
      </Typography>
      
      <Card>
        <List>
          {todayMeetings.length === 0 ? (
            <ListItem>
              <ListItemText primary="今天没有会议" />
            </ListItem>
          ) : (
            todayMeetings.map((meeting, index) => (
              <React.Fragment key={meeting.id}>
                {index > 0 && <Divider />}
                <ListItem>
                  <ListItemText
                    primary={meeting.title}
                    secondary={
                      <>
                        <Typography component="span" variant="body2" color="textSecondary">
                          时间：{format(new Date(meeting.start), 'kk:mm')} - {format(new Date(meeting.end), 'kk:mm')}
                        </Typography>
                        {meeting.description && (
                          <Typography component="p" variant="body2" color="textSecondary" sx={{ mt: 1 }}>
                            描述：{meeting.description}
                          </Typography>
                        )}
                      </>
                    }
                  />
                </ListItem>
              </React.Fragment>
            ))
          )}
        </List>
      </Card>
    </Box>
  );
};

export default Dashboard;